<template>
  <div class="editReportTemplate flex" v-loading="loading" v-if="!route.query.instanceId">
    <div class="right mr-5">
      <DocumentEditor
          v-if="mangaementStore.editTemp.tempFileConfig.editorConfig"
          id="docEditor"
          documentServerUrl="http://19.120.74.92:8090/"
          :config="mangaementStore.editTemp.tempFileConfig"
          :events_onDocumentReady="onDocumentReady"
          :events_on-warning="onDocumentWarning"
          :events_onError="onDocumentError"
      />
    </div>
    <div class="left flex flex-column ">
      <div class="wholeTitle">基本参数</div>
      <el-scrollbar style="height: 120px">
        <div class="flex flex-column  mt-2 ml-5 mr-5"
             v-if=" mangaementStore.editTemp.reportTag.commonTagList">
          <div class="flex  flex-column">
            <div
                @click="copyHandle(item.tag)"
                class="left-text1 pointer"
                v-for="(item,index) in mangaementStore.editTemp.reportTag.commonTagList"
                :key="index">
              {{ item.name }}
            </div>
          </div>
        </div>
      </el-scrollbar>
      <div class=" wholeTitle mt-2">统计数据</div>
      <el-scrollbar class="flex1">
        <Edit-tree class=" mt-2 pl-5 pr-5" v-if="mangaementStore.editTemp.defaultOpen.length>0"
                   :report-data-tag-list="mangaementStore.editTemp.reportTag.reportDataTagList"></Edit-tree>
      </el-scrollbar>
      <el-button type="primary" size="large" class="mr-5 ml-5 mt-5" @click="saveAndClose">保存并关闭页面</el-button>
    </div>
  </div>
  <div v-else style="height: 100vh" v-loading="loading">
    <DocumentEditor
        v-if="mangaementStore.editTemp.tempFileConfig.editorConfig && !isClose"
        id="docEditor"
        documentServerUrl="http://19.120.74.92:8090/"
        :config="mangaementStore.editTemp.tempFileConfig"
        :events_onDocumentReady="onDocumentReady"
        :events_on-warning="onDocumentWarning"
        :events_onError="onDocumentError"
    />
  </div>
</template>

<script setup lang="ts">
//组件
import {defineComponent, onMounted} from 'vue';
import {DocumentEditor} from "@onlyoffice/document-editor-vue";
import {ElMessage} from 'element-plus'

//接口


//api
import {reactive, ref} from 'vue';
import {onBeforeRouteLeave, useRoute, useRouter} from "vue-router";
import {copy} from "@/utils/copy";
import useMangaementStore from "@/store/modules/mangement/mangement";
import EditTree from "@/views/Management/compoments/editTree.vue";
//data
let route = useRoute()
let router = useRouter()
let mangaementStore = useMangaementStore()
const loading = ref(true)
let timer: any = null
let isClose = ref(false)
/*
函数
*/

/**************************接口函数**************************/
const copyHandle = (data: string) => {
  copy(data)
}

const onDocumentReady = () => {
  loading.value = false
  ElMessage.success('成功加载')
}

const onDocumentWarning = (event: any) => {
  loading.value = false
  console.log(event)
  ElMessage.warning('加载失败')
}

const onDocumentError = (event: any) => {
  loading.value = false
  console.log(event)
  ElMessage.error('加载失败')
}

/**************************操作函数**************************/
if (route.query.id && !route.query.instanceId) {
  mangaementStore.editTemp.defaultOpen = []
  mangaementStore.getReportTagList(route.query.id as string)
  mangaementStore.useGetReporstViewstruct(route.query.id as string)
} else {
  let params = {instanceId: route.query.instanceId}
  if (route.query.type == '0') {
    mangaementStore.useGetGenReportfile(route.query.instanceId as string)
  } else {
    mangaementStore.useGetReportfile(route.query.instanceId as string)
  }
}

const saveAndClose = () => {
  loading.value = true
  ElMessage.success('页面保存完毕之后将会关闭')
  timer = setTimeout(() => {
    if (window.opener) {
      window.close()
    } else {
      //@ts-ignore
      window.open('about:blank', '_self').close()
    }
  }, 3000)
}
onMounted(() => {
  window.addEventListener('beforeunload', () => {
    clearTimeout(timer)
    timer = null
  })
})
</script>

<style lang="scss" scoped>
.editReportTemplate {
  padding: 20px;
  box-sizing: border-box;
  height: 100%;

  .left {
    border-radius: 10px;
    height: 100%;
    background-color: white;
    width: 20%;
    box-sizing: border-box;
    padding-bottom: 20px;

    .left-text1 {
      font-size: 18px;
      line-height: 56px;
      padding-left: 36px;
    }

    .left-text1:hover {
      background-color: rgb(236, 245, 255);
    }

    .back {
      font-size: 16px;
    }

    .wholeTitle {
      padding: 20px 0 20px 20px;
      border-bottom: 1px solid #BBBBBB;
    }
  }

  .right {
    flex: 1;
    background-color: white;
    border-radius: 10px;
    padding: 20px;

    .iframe-style {
      height: 100%;
      width: 100%;
    }
  }
}

</style>
